<?php $__env->startSection('title','后台管理系统 - 图片列表页'); ?>

<?php $__env->startSection('main'); ?>



<!-- 内容 -->
<div class="col-md-10">

	<ol class="breadcrumb">
		<li><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
		<li><a href="#">图片管理</a></li>
		<li class="active">图片列表</li>

		<button class="btn btn-primary btn-xs pull-right"><span class="glyphicon glyphicon-refresh"></span></button>
	</ol>

	<!-- 面版 -->
	<div class="panel panel-default">
		<div class="panel-heading">
			<button class="btn btn-danger" onclick="delAll()"><span class="glyphicon glyphicon-trash"></span> 批量删除</button>
			<a href="<?php echo e(asset('admin/pic/create')); ?>" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span> 添加图片</a>

			<p class="pull-right tots" >共有 <span id="tot"><?php echo e(count($data)); ?></span> 条数据</p>
			<form action="" class="form-inline pull-right">
				<div class="form-group">
					<input type="text" name="" class="form-control" placeholder="请输入你要搜索的内容" id="">
				</div>

				<input type="submit" value="搜索" class="btn btn-success">
			</form>


		</div>
		<table class="table-bordered table table-hover" id="table">

			<tr>
			<th><input type="checkbox"  name=""   id="allsel"></th>
			<th>ID</th>
			<th>TITLE</th>
			<th>SORT</th>
			<th>IMG</th>
			<th>操作</th>
			</tr>
			<?php $__currentLoopData = $data; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $value): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
			<tr id="tr<?php echo e($value->id); ?>">
				<td><input type="checkbox" value="<?php echo e($value->id); ?>" name="" class="inputs"></td>
				<td><?php echo e($value->id); ?></td>
				<td><?php echo e($value->title); ?></td>
				<td><input type="text" onchange="change(this,<?php echo e($value->id); ?>)" value="<?php echo e($value->sort); ?>" name ="" id=""></td>
				<td><img width="200px" src="/Uploads/Goods/<?php echo e($value->img); ?>" alt=""></td>

				<td><a href="/admin/pic/<?php echo e($value->id); ?>/edit" class="glyphicon glyphicon-pencil"></a>&nbsp;&nbsp;&nbsp;<a href="javascript:;" onclick="del(this,<?php echo e($value->id); ?>)" class="glyphicon glyphicon-trash"></a></td>
			</tr>
			<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

		</table>
		<!-- 分页效果 -->
		<div class="panel-footer">
			<nav style="text-align:center;">
				<ul class="pagination">
					<?php for($i=1;$i<=$page;$i++): ?>
							<li><a href="javascript:;"  onclick="page1(this,<?php echo e($i); ?>)"><?php echo e($i); ?></a></li>
					<?php endfor; ?>
					<!--<li><a href="#">&laquo;</a></li>
					<li><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">5</a></li>
					<li><a href="#">&raquo;</a></li>-->
				</ul>
			</nav>

		</div>
	</div>
</div>

			<script>
			//无刷新的分页
			function page(obj,page){
				//alert(page);
				//发送ajax请求
				var str='<tr><th><input type="checkbox"  name=""   id="allsel"></th><th>ID</th><th>TITLE</th><th>SORT</th><th>IMG</th><th>操作</th></tr>';
				$.get('/admin/pic',{'page':page},function(data){
					//处理数据
					//alert(data[0].title);
					//alert(data.length);
					for(var i=0;i<data.length;i++){
						
					str+= '<tr id="tr'+ data[i].id +'">';
						str+= '<td><input type="checkbox" value="'+ data[i].id +'" name="" class="inputs"></td>';
						str+= '<td>'+ data[i].id +'</td>';
						str+= '<td>'+ data[i].title +'</td>';
						str+= '<td><input type="text" onchange="change(this,'+ data[i].id +')" value="'+ data[i].sort +'" name ="" id=""></td>';
						str+= '<td><img width="200px" src="/Uploads/Goods/'+ data[i].img +'" alt=""></td>';
				
						str+= '<td><a href="/admin/pic/'+ data[i].id +'/edit" class="glyphicon glyphicon-pencil"></a>&nbsp;&nbsp;&nbsp;<a href="javascript:;" onclick="del(this,'+ data[i].id +')" class="glyphicon glyphicon-trash"></a></td>';
					str+= '</tr>';
						
					}
					//alert(str);
					//写入到表格中
					$('#table').html(str);
				});
				
			}

            function page1(obj,page){
                //alert(page);
                //发送ajax请求

                $.get('/admin/pic',{'page':page},function(data){
                    //处理数据
					alert(data);

                    //写入到表格中
					$('#table').html(data);


                });

            }

			
			//id换成对应按钮的id，class为对应input的class
			$(document).on('click','#allsel',function(){
				if($(this).is(":checked")){
					$('.inputs').prop('checked',true);
				}else{
					$('.inputs').prop('checked',false);
				}
			})

					
		
		
			
				//obj,id 接受参数
				function del(obj,id){
					
					//alert(id);
					//$.post(请求地址,传递参数,响应请求)
					//data可以随便命名 主要接收ajax返回的数据
                    var r=confirm("您确定要删除?")
                    if (r==true)
                    {
					$.post('/admin/pic/'+id,{'id':id,'_method':'delete','_token':'<?php echo e(csrf_token()); ?>'},
						function(data){
							//判断接收的数据如果1成功  0失败

							if(data){
								//移除对应删除的数据
								$(obj).parent().parent().remove();
								//获取总数据条数
								var tot=Number($("#tot").html());
								//修改总数据条数
								$("#tot").html(--tot);

							}else{
								alert('删除失败');
							}
						}
					);

                    } else{
                        return;
                    };
				}
				
				//批量删除方法
				function delAll(){
				//alert($(".inputs:checked").length);
					//alert('123');
					//获取被选中的数据的值
					var arr=[];
						
					//获取所有的数据 并且是被选中的
					inputs = $(".inputs:checked");//列表前边小复选框
					//获取选中数据的value值
					for(var i=inputs.length-1; i>=0; i--){
						//把值压入到数组
						arr.push(inputs.eq(i).val());
					}
					//alert(arr);
					//把arr转换成字符串
					str =arr.join(",");//把数组中的所有元素放入一个字符串

                    var r=confirm("您确定要删除?")
                    if (r==true)
                    {
					//发送ajax请求
					$.post("<?php echo e(asset('admin/pic/delAll')); ?>",{'str':str,'_token':'<?php echo e(csrf_token()); ?>'},function(data){
						//判断数据
						if(data == arr.length){

							//移除对应的数据
							for(var i=inputs.length-1; i>=0; i--){
								$("#tr"+arr[i]).remove();
							};

							//修改数据个数
							tot=Number($("#tot").html())-Number(data);
							$("#tot").html(tot);


						}else{
							alert('删除失败');
						}

					});
                    }else {return;};
				}

				//无刷新排序
				function change(obj,id){
					//alert(id);
					//获取id
					
					//获取用户修改的值
					var val = $(obj).val();
					$.post('/admin/pic/sort',{'id':id,'val':val,'_token':'<?php echo e(csrf_token()); ?>'},function(data){
						//判断是否修改成功
						if(data == 1){
							//页面自动刷新
							window.location.reload();
						}else{
							alert('修改失败');
						}
						
					});
					
				}
				
				/* ajax 使用实例
				[百度搜索 提示关联词]
				[加载更多]
				[瀑布流]
				*/
				
			</script>
<?php $__env->stopSection(); ?>



<?php echo $__env->make("muban.admin", array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>